import styles from "../index.module.less";
import Vector from "@/assets/img/Vector.png";
import {
  drawerFormState,
  isChecked,
  isDisplay,
  operateType,
  reachargeRuleForm,
  wrapRef,
} from "../store";
import { modalConfig } from "./modal";
import { drawerConfig } from "../drawer";
export default defineComponent({
  setup() {
    const cateDisplayString = (min, max) => {
      if (!isEmptyType(min) && +min > 0 && (isEmptyType(max) || +max === 0)) {
        return "大于等于" + min + $t("base.usdt");
      }

      if (!isEmptyType(max) && +max > 0 && (isEmptyType(min) || +min === 0)) {
        return "小于等于" + max + $t("base.usdt");
      }

      return (
        reachargeRuleForm.min_recharge_amount +
        "~" +
        reachargeRuleForm.max_recharge_amount +
        $t("base.usdt")
      );
    };
    const defineDrawer = drawerConfig();
    const showDrawer = () => (defineDrawer.visible.value = true);
    const handleAction = ({ record = {}, type = "" }: any = {}) => {
      operateType.value = type;
      const { title: drawerTitle } = defineDrawer;
      switch (trimAll(type)) {
        case "add":
          drawerTitle.value = $t("base.addRechargeRule");
          showDrawer();
          break;
        case "update":
          drawerTitle.value = $t("base.editRechargeRule");
          initObjAttr(drawerFormState, reachargeRuleForm, "target");
          drawerFormState.wallet_amount_limit = delThousands(
            drawerFormState.wallet_amount_limit
          );
          drawerFormState.amount_list =
            drawerFormState?.amount_list?.split?.(",") ?? [];

          drawerFormState.max_recharge_amount =
            +drawerFormState.max_recharge_amount > 0
              ? drawerFormState.max_recharge_amount
              : undefined;

          drawerFormState.min_recharge_amount =
            +drawerFormState.min_recharge_amount > 0
              ? drawerFormState.min_recharge_amount
              : undefined;

          isChecked[0] = !isEmptyType(drawerFormState.min_recharge_amount);
          isChecked[1] = !isEmptyType(drawerFormState.max_recharge_amount);
          showDrawer();
          break;
      }
    };
    const defineModal = modalConfig();
    return () => (
      <div class={styles.wrap} ref={(el) => (wrapRef.value = el)}>
        {isDisplay.value ? (
          <div class={styles.warning}>
            <div class={styles.img_wrap}>
              <img src={Vector} />
            </div>
            <div class={styles.tips}>{$t("recharge12")}</div>

            {withDirectivePower({
              vNode: (
                <s-button
                  type="primary"
                  onClick={handleAction.bind(this, { type: "add" })}
                >
                  {$t("recharge13")}
                </s-button>
              ),
              bindingValue: "rechargeApi.createRechargeRule",
            })}
          </div>
        ) : (
          <>
            <a-row class="s-drawer-extra-row">
              <a-col span={20}>
                <s-title>{$t("base.baseSet")}</s-title>
              </a-col>

              <a-col span={4} style="text-align: right">
                {withDirectivePower({
                  vNode: (
                    <s-button
                      onClick={handleAction.bind(this, {
                        record: {},
                        type: "update",
                      })}
                      type="primary"
                      size="small"
                      style="width: 55px"
                    >
                      {$t("base.edit")}
                    </s-button>
                  ),
                  bindingValue: "rechargeApi.updateRechargeRule",
                })}
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("table186")}
                >
                  <i>{reachargeRuleForm.name}</i>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("table187")}
                >
                  <i>
                    {reachargeRuleForm.is_wallet_amount_limit === 0
                      ? $t("recharge21")
                      : reachargeRuleForm.wallet_amount_limit
                      ? $t("recharge22") +
                        reachargeRuleForm.wallet_amount_limit +
                        $t("base.usdt")
                      : undefined}
                  </i>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row">
              <s-title>{$t("base.rechargeSet")}</s-title>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("table175")}
                  name="amount_list"
                >
                  <div class={styles.tag_list}>
                    {reachargeRuleForm?.amount_list
                      ?.split?.(",")
                      ?.map((item: any) => (
                        <a-tag color="#a1a1a1">
                          {{
                            icon: renderIcon(
                              "icon-meiyuan" + " " + styles.s_icon
                            ),
                            default: <i>{item}</i>,
                          }}
                        </a-tag>
                      ))}
                  </div>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("table188")}
                >
                  <i>
                    {reachargeRuleForm.is_recharge_amount_limit === 0
                      ? $t("recharge21")
                      : (+reachargeRuleForm.min_recharge_amount === 0 ||
                          isEmptyType(reachargeRuleForm.min_recharge_amount)) &&
                        (+reachargeRuleForm.max_recharge_amount === 0 ||
                          isEmptyType(reachargeRuleForm.max_recharge_amount))
                      ? undefined
                      : cateDisplayString(
                          reachargeRuleForm.min_recharge_amount,
                          reachargeRuleForm.max_recharge_amount
                        )}
                  </i>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row">
              <s-title>{$t("base.otherSet")}</s-title>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("table185")}
                >
                  <i>{reachargeRuleForm.comment}</i>
                </a-form-item>
              </a-col>
            </a-row>
          </>
        )}

        <s-drawer {...defineDrawer} />
        <s-modal {...defineModal} />
      </div>
    );
  },
});
